<%--
  User: 19079,Date: 2020/12/17,time: 17:58
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
</head>
<body>
<%--折叠面板--%>
<div class="layui-collapse" lay-accordion>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">查询</h2>
        <div class="layui-colla-content layui-show">
            <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">用户名字：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">职位选择：</label>
                    <div class="layui-input-inline">
                        <select name="roleid" lay-filter="aihao">
                            <option value="-1">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn"id="ss" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<%--表格--%>
<div class="">
    <table id="userTB" lay-filter="userTB"></table>
</div>
<%--添加和批量删除按钮--%>
<script type="text/html" id="add">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" onclick="delet()">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add" onclick="add()">添加</button>
    </div>
</script>
<%--修改和删除按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%--添加表单弹出层--%>
<div id="addf" style="display: none">
    <form class="layui-form" lay-filter="addf" style="padding: 40px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户编码:</label>
            <div class="layui-input-block">
                <input type="text" name="usercode"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称:</label>
            <div class="layui-input-block">
                <input type="text" name="username"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="0" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄:</label>
            <div class="layui-input-block">
                <input type="date" id="date2" name="age" lay-verify="date2" class="layui-input test-item"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input type="text" name="phone"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input type="text" name="email"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-input-inline" >
            <label class="layui-form-label">职位:</label>
            <div class="layui-input-block" style="margin-right: 0px">
                <select name="roleid" lay-filter="aihao">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>
    </form>
</div>
<%--修改表单弹出层--%>
<div id="up" style="display: none">
    <form class="layui-form" lay-filter="up" style="padding: 40px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户编码:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="usercode"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称:</label>
            <div class="layui-input-block">
                <input type="text" name="username"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="0" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄:</label>
            <div class="layui-input-block">
                <input type="date" name="age" lay-verify="date2" class="layui-input test-item"/>
            </div>
        </div>
<%--        <div class="layui-form-item">--%>
<%--            <label class="layui-form-label">是否离职:</label>--%>
<%--            <div class="layui-input-block">--%>
<%--                <input type="checkbox" name="" title="在职" checked>--%>
<%--            </div>--%>
<%--        </div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input type="text" name="phone"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input type="text" name="email"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-input-inline" >
            <label class="layui-form-label">职位:</label>
            <div class="layui-input-block" style="margin-right: 0px">
                <select name="roleid" lay-filter="aihao">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="hidden" name="userstatus1">
                <input type="checkbox"  name="userstatus"lay-text="ON|OFF"  lay-skin="switch">
            </div>
        </div>
    </form>
</div>
</body>
<script src="/webjars/layui/2.5.5/layui.js"></script>
<script>
    layui.use(["jquery"],function () {
        let $=layui.$;
        $(function () {
            $("#ss").click(function () {
                let username=$("[name=username]");
                let userRole=$("[name=roleid]").val();
                alert(userRole);
                layui.table.reload('userTB', {
                    where: { //设定异步数据接口的额外参数，任意设
                        username: username.val(),
                        roleid:userRole
                    }
                });
            });
        })
        $.get("xt/jsgl/getAll",function ({data}) {
                $.each(data,function (index) {
                    $("<option value='"+this.id+"'>"+this.rolename+"</option>")
                        .appendTo("[name=roleid]");
                })
        });
    })
    layui.use(["table",'element','form',"layer"],function (){
        let table=layui.table;
        table.render({
            elem:"#userTB",
            id:"userTB",
            url:"xt/yhgl/getAll",
            even:true,
            page:true,
            limit:3,
            limits:[3,6,9],
            toolbar:"#add",
            cols:[[
                {type:"checkbox"},
                {title:"用户id",field:"id"},
                {title:"用户编码",field:"usercode"},
                {title:"用户名称",field:"username"},
                {title:"性别",templet:function (row) {
                        return row.sex==1?"男":"女";
                    }},
                {title:"年龄",field:"age"},
                {title:"入职日期",field:"entrydate"},
                // {title:"离职日期",templet:function (row) {
                //     return row.dimissiondate==null?"在职":row.dimissiondate;
                //         }},
                {title:"手机号",field:"phone"},
                {title:"邮箱",field:"email"},
                {title:"注册时间",field:"creationtime"},
                {title:"最后登录时间",templet:function (row) {
                        return row.lastlogintime==null?"暂未登陆":row.lastlogintime;
                    }},
                {title:"创建人",field:"createdby"},
                {title:"最后修改时间",templet:function (row) {
                        return row.lastupdatetime==null?"暂未修改":row.lastupdatetime;
                    }},
                {title:"用户状态",templet:function (row) {
                        return row.userstatus==1?"启用":"禁用";
                    }},
                {title:"用户角色",field:"rolename"},
                {title: "操作",toolbar: "#barDemo"}
            ]]
        });
        table.on('tool(userTB)',function ({data,event}){
            switch (event){
                case "update":
                    update(data);
                    break;
                case "del":
                    layui.layer.confirm("确定要删除？",function (index){
                        layui.layer.close(index);
                        del(data.id);
                    });
                    break;
            };
        });
    });
    function del(id){
        layui.use(['layer','jquery','table'],function () {
            let $=layui.$;
            let layer=layui.layer;
            $.post('xt/yhgl/del',{"id":id}).done(({msg})=>{
                layer.msg(msg);
                layui.table.reload("userTB");
            });
        });
    }
    function add(){
        layui.use(["form",'jquery','layer'],function () {
            let layer=layui.layer;
            let $=layui.$;
            $("#addf form")[0].reset();
            layer.open({
                type: 1,
                content:$('#addf'),
                area: '500px',
                btn:['确定',"取消"],
                yes(){
                    let a=layui.form.val('addf');
                    console.log(a);
                    $.post('xt/yhgl/add',{'usercode':a.usercode,"username":a.username,
                    "bb":a.age,"email":a.email,"phone":a.phone,"sex":a.sex
                        ,"roleid":a.roleid})
                        .done(({msg})=>{
                            layer.close(layer.index);
                            layer.msg(msg);
                            layui.table.reload("userTB");
                        });
                }
            });
        })
    }
    function update(data){
        layui.use(['form','layer','jquery'],function () {
            let layer=layui.layer;
            let $=layui.$;
            layui.form.val('up',data);
            layer.open({
                type:1,
                content:$("#up"),
                btn: ["确定","取消"],
                area: '500px',
                yes() {
                    let a=layui.form.val("up");
                    if ($(".layui-form-switch em").text()=="ON"){
                        a.userstatus=1;
                    }else {
                        a.userstatus=0;
                    }
                    $(".layui-form-switch").removeClass("layui-form-onswitch");
                    console.log(a);
                    layer.close(layer.index);
                    $.post("xt/yhgl/update",{'id':a.id,'usercode':a.usercode,
                        "username":a.username,
                        "sex":a.sex,
                        "bb":a.age,"email":a.email,"phone":a.phone
                        ,"roleid":a.roleid,"userstatus":a.userstatus}).done(({msg})=>{
                        layer.msg(msg);
                        layui.table.reload("userTB");
                    });
                }
            });
        });
    }
    function delet() {
        layui.use(['jquery','form','table'],function () {
            let rows=layui.table.checkStatus("userTB").data;
            if (rows.length==0) {
                layui.layer.alert("请选择要删除的数据！");
                return ;
            }
            let $=layui.$;
            let str=rows.map(row=>"ids="+row.id).join("&");
            console.log(str);
            $.post("/xt/yhgl/delete",str).done(({msg})=>{
                console.log(msg);
                layui.layer.msg(msg);
                layui.table.reload("userTB");
            });
        })
    }
</script>
</html>

